import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';

@Component({
  selector: 'app-ayth-selector',
template: `
  <div class="wraper ">
<nz-select style="width:100px" class="body" class="righttext"  [ngClass]="{none:!editing }"  [(ngModel)]="value"  nzPlaceHolder="请选择" [nzCustomTemplate]="iconTemplate"  (ngModelChange)="onChange($event)">
    <nz-option nzCustomContent  [nzValue]="false">
      <i style="color:#DE0010" nz-icon nzType="close"></i>
     
    </nz-option>
    <nz-option nzCustomContent  class="righttext"  [nzValue]="true">
        <i style="color: #0353CB;" nz-icon nzType="check" nzTheme="outline"></i>
  
    </nz-option>
    <!-- 这个是最终显示 上面是下拉选项 -->
    <ng-template #iconTemplate>
     <i *ngIf="value" style="color: #0353CB;" nz-icon nzType="check" ></i>
     <i  style="color:#DE0010" *ngIf="!value" nz-icon nzType="close"></i>
    </ng-template>

</nz-select>
<span class="body" [ngClass]="{none:editing }">
    <i [ngClass]="{none:!bool }" style="color: #0353CB;" nz-icon nzType="check" nzTheme="outline"></i>
    <i [ngClass]="{none:bool }" style="color:#DE0010" nz-icon nzType="close"></i>
</span>

    <button class="toggle">
        <i   nz-icon [nzType]="editing?'check':'edit'" nzTheme="outline" (click)="editing = !editing"></i>

    </button>
</div>
`,
  styles:[
    `
    .wraper{
    display: flex;
    min-width: 30px;
    justify-content: space-between;
    
}
.wraper .righttext{
        text-align: right;
    }

    .wraper .body.none ,.wraper .none{
        display: none;
    }
    .wraper .toggle{
        cursor: pointer;
        opacity: 0;
    }
    .wraper:hover .toggle{
        opacity: 1;
        height: 30px;
    }

`
  ]
})
export class AythSelectorComponent implements OnInit {

  editing = false  ;
  @Input() set bool(val) {
    this.value = val ;
  };
  @Output() boolChange: EventEmitter<boolean> = new EventEmitter() ;
  value = false ;
  constructor() { }

  ngOnInit(): void {
    this.value = this.bool ;
  }
  /* 这种写法确实没考虑 外部直接修改bool的问题 还是需要给他来一个set */
  onChange(flag: boolean): void {
    this.bool = flag ;
    console.log( this.bool);
    this.boolChange.emit(flag) ;
  }

}
